

import { Avatar, Button } from 'antd';
import { TeamOutlined } from '@ant-design/icons'

import {
    group_item,
    group_info,
    group_info_avator,
    group_info_name,
    group_info_people_num,
    group_info_intro,
    join_btn,
} from './index.module.css'
import { imgUrlDev, replaceHighLigh } from '../../assets/js/tools';
import { publish } from 'pubsub-js';
import { joinGroup, showGroupInfo } from '../../event-type';

function GroupSearchItem(props) {
    
    const { data } = props;
    const { group_id, group_name, group_intro, group_avator, people_num, create_time } = data;
    const highLight = props.highLight ?? false;    // props可选,关键字高亮显示
    
    function publishGroupInfo() {
        // 弹出群组信息
        publish(showGroupInfo, { group_id, group_name, group_intro, group_avator, people_num, create_time });
    }
    function wantJoinGroup() {
        // 发送加入群组消息
        publish(joinGroup, group_id);
    }

    return (
        <div className={group_item}>
            <Avatar className={group_info_avator} src={imgUrlDev(group_avator)} size={60} onClick={publishGroupInfo} />
            <div className={group_info}>
                <span className={group_info_name} dangerouslySetInnerHTML={{__html: replaceHighLigh(group_name, highLight)}}></span>
                <span className={group_info_people_num}><TeamOutlined /> {people_num}</span>
                <span className={group_info_intro}>{group_intro}</span>
            </div>
            <Button className={join_btn} type="primary" onClick={wantJoinGroup}>+加群</Button>
        </div>
    )
}


export default GroupSearchItem;

